<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>transition</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		#my-3D{
			-webkit-perspective:800px;
			-webkit-perspective-origin:50% 50%;
			overflow: hidden;
		}
		#page-group{
			display: flex;
			width: 500px;
			height: 500px;
			margin: 0 auto;
			-webkit-transform-style:preserve-3d;
		}
		.page{
			position: absolute;
			width: 500px;
			height: 500px;
			background-color: #900;
			color: #FFF;
			font-weight: bold;
			font-size: 100px;
			line-height: 100px;
			display: flex;
			justify-content: center;
			align-items: center;
			line-height: 120px;
		}
		#btn a{ 
			float: left;
			width: 40px;
			height: 20px;
			text-decoration:none;
			color: #fff;
			background: #444;
			display: block;
			font-weight: bold;
			margin-left: 10px;
			text-align: center;
		}

		#btn{
			width: 100px;
			margin: 40px auto;
		}
		#btn::after{
			content: "";
			display: block;
			clear: both;
			height: 0;
			visibility: hidden;
		}
		
		.labelgroup{
			width: 500px;
			margin: 0 auto; /* 水平居中 */
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		
		.label{
			display: flex;
			width: 500px;
			background: #000;
			color: #fff;
			font-size: 20px;
			text-align: center;
			opacity: 0.5;
			height: 100px;
			justify-content: center;
			align-items: center;
			margin: 1px ;
		}
		
		#page1{
			-webkit-transform-origin:bottom;
			-webkit-transition:-webkit-transform 1s ease;

		}
		.page:not(#page1){
			-webkit-transform-origin:bottom;
			-webkit-transition:-webkit-transform 1s ease;
			-webkit-transform:rotateX(90deg);
		}
		</style>
	</head>
	<body>
		<div id="my-3D">
			<div id="page-group">
				<!-- 页面将通过JavaScript动态生成 -->
			</div>
		</div>

		
		<div class="labelgroup">
			<div class="label" id="label1"></div>
			<div class="label" id="label2"></div>
			<div class="label" id="label3"></div>
			<div class="label" id="label4"></div>
		</div>

		<div id="btn">
			<a href="javascript:next()" id="next">next</a>
			<a href="javascript:prev()" id="prev">prev</a>  
		</div>

	</body>
	<script>
		var curIndex = 1;
		var PAGE_NUM = 20;
		// 初始化页面
        const messages = [
			"答案之书",
            "毫无疑问，这是一个绝佳的选择。",
            "目前来看，时机尚未成熟。",
            "保持现状，或许会有更好的结果。",
            "大胆去做，成功就在前方等着你。",
            "这件事需要再深思熟虑一番。",
            "一切皆有可能，放手去尝试吧。",
            "从长远角度，不建议你现在行动。",
            "可以尝试迈出第一步，会有意想不到的收获。",
            "答案就在你心中，跟随内心的指引。",
            "先观察局势，再做决定也不迟。",
			"毫无疑问，这是一个绝佳的选择。",
            "目前来看，时机尚未成熟。",
            "保持现状，或许会有更好的结果。",
            "大胆去做，成功就在前方等着你。",
            "这件事需要再深思熟虑一番。",
            "一切皆有可能，放手去尝试吧。",
            "从长远角度，不建议你现在行动。",
            "可以尝试迈出第一步，会有意想不到的收获。",
            "答案就在你心中，跟随内心的指引。",
            "先观察局势，再做决定也不迟。"
        ];

        function initPages() {
            const pageGroup = document.getElementById('page-group');
            for(let i = 1; i <= PAGE_NUM; i++) {
                const page = document.createElement('div');
                page.className = 'page';
                page.id = 'page' + i;
				if(i != 1) {
					page.textContent = '['+ (i-1) +']';
				}
				page.textContent += messages[i-1];
                pageGroup.appendChild(page);
            }
        }
		// 页面加载完成后初始化
		window.onload = initPages;

		
		function next() {
			if(curIndex == PAGE_NUM)
				return;
			console.log(curIndex);
			var curPage = document.getElementById('page'+curIndex);
			curPage.style.webkitTransform = 'rotateX(-90deg)'; //消失
			curIndex ++; 
			var nextPage = document.getElementById('page'+curIndex);
			nextPage.style.webkitTransform = 'rotateX(0deg)'; //出现
		}

		function prev() {
			if(curIndex == 1)
				return;
			var curPage = document.getElementById('page'+curIndex);
			curPage.style.webkitTransform = 'rotateX(90deg)';
			curIndex --;
			var nextPage = document.getElementById('page'+curIndex);
			nextPage.style.webkitTransform = 'rotateX(0deg)';
		}
	</script>
	</html>